<!-- 根据数据渲染不同表格 -->
<template>
  <div>
    <div class="table">
      <div class="thead">
          <div class="tr">
            <div :class="'th'" v-for="(item,i) in tableHeader" :key="i">{{item.label}}</div>
            <div :class="'th'">操作</div>
          </div>
      </div>
      <div class="tbody">
        <div  v-for="(item,index) in tableData" :key="index">
          <!-- 一级 TR  添加点击事件以控制子级是否显示-->
          <div class="lvOneTr tr">
            <!-- 循环表头填入对应数据 当前item 为当前 tr所有数据 根据字段名 'prop' 取得对应数据 -->
            <div class="td" v-for="(header,i) in tableHeader" :key="i">
              {{item[header.prop]}}
            </div>
            <div class="td"><a href="###">详情</a></div>
          </div>
          <!-- 子级TR -->
          <div class="tr" v-for="(sonItem,i) in item.children" :key="i">
            <div class="td"  v-for="(header,i) in tableHeader" :key="i">
              {{sonItem[header.prop]}}
            </div>
            <div class="td"><a href="###">详情</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
  return {
      tableData:[
        {
          feild2:'第2列',feild1:'第1列',feild3:'第3列',feild5:'第1行',
          children:[
            {feild2:'son第2列',feild1:'son第1列',feild3:'son第3列',feild5:'第2行'},
            {feild2:'son第2列',feild1:'son第1列',feild3:'son第3列',feild5:'第2行'}
          ]
        },
        {feild2:'第2列',feild1:'第1列',feild3:'第3列',feild5:'第2行',
        children:[
            {feild2:'son第2列',feild1:'son第1列',feild3:'son第3列',feild5:'第2行'},
            {feild2:'son第2列',feild1:'son第1列',feild3:'son第3列',feild5:'第2行'}
          ]},
        {feild2:'第2列',feild1:'第1列',feild3:'第3列',feild5:'第3行'}
      ],
    };
  },
  computed:{
    tableHeader(){
      return [
        {prop:'feild1',label:'单位1'},
        {prop:'feild2',label:'单位2'},
        {prop:'feild3',label:'单位3'}
      ]
    }
  },
}
</script>
<style scoped>
.iconSpan{
  display: inline-block;
  height: 2rem;
  width: 2rem;
}
.iconDiv{
  display: inline-block;
  margin: 0 0.5rem;
  height: 2rem;
  width: 1.2rem;
}
.lvTwoTr .td{
  background: #FFF;
  margin: 0;
  border-left: 1px solid #EAEAEA;
  border-top: 1px solid #EAEAEA;
}
.lvTwoTr .td:nth-child(1), .lvTwoTr .tr:nth-child(1) .td{
  border-left: none;
}
.lvOneTr .td{
  background: #ccc;
}
 .thead .th{
   text-align: center;
  padding: 2rem 0 2rem 0rem;
 }
.tbody .td{
  text-align: center;
  padding: 2rem 0 2rem 0rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table{
  width: 100%;
  font-size: 2rem;
}
.thead, .tbody{
  width: 100%;
}
.tr .td:nth-child(1), .tr .th:nth-child(1){
  flex: 3;
  text-align: left;
  padding-left: 1rem;
}
.tr .th{
  background: #FFDFE0;
}
.tr .td, .tr .th{
  flex: 1.4;
  margin: 0 0 1px 1px;
}
.tr{
  display: flex;
}
.thead .th{
  font-weight: 600;
}
</style>